<template>
    <div class="post-comments">
        <Divider title="评论互动" />
        <Comment :data="list" :avatar="avatar" @comment-state="commentState" @sned="handleSendComment" @reply="handleReply" @sub-reply="handleSubReply" @more="handleMore" @likes="handleLike" @user="handleUserInfo" />
        <!-- 分页 -->
        <div v-if="total > pageSize" class="app-pages">
            <Page :total="total" :page-size="pageSize" :page-num="pageNum" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { Toast, isNull } from 'usuuu'
import type { CommentResult } from 'usuuu'

/**
 * 用户全局状态
 */
const user = useUser()
/**
 * 用户头像
 */
const avatar = ref(user.value ? user.value.avatar : '')
/**
 * 请求评论
 */
const { list, total, pageNum, refresh, pageSize } = await articleCommentApi(states().pageNum, states().paramsId!)
/**
 * 评论回复
 * 
 * @param datas 返回的评论数据 
 * @param callback 是否关闭评论框
 */
const handleSendComment = async (datas: CommentResult, callback: (value: boolean) => void) => {
    if (validateUser()) {
        if (isNull(datas.content)) {
            Toast.open('请输入评论内容')
            return
        }
        const data = await commentSaveApi({
            articleId: states().paramsId,
            content: toBr(datas.content),
            os: datas.os.osName + datas.os.osVersion,
            browser: datas.os.browserName + datas.os.browserVersion
        })
        if (data.code == 200) {
            callback(true)
            Toast.open(data.msg)
        } else {
            Toast.open(data.msg)
        }
    }
}
/**
 * 主评论回复
 * 
 * @param datas 返回的评论数据 
 * @param callback 是否关闭评论框
 */
const handleReply = async (datas: CommentResult, callback: (value: boolean) => void) => {
    if (validateUser()) {
        if (isNull(datas.content)) {
            Toast.open('请输入评论内容')
            return
        }
        const data = await commentSaveApi({
            articleId: states().paramsId,
            mid: datas.replyComment.id,
            pid: datas.replyComment.id,
            replyUserId: datas.replyComment.user.id,
            content: toBr(datas.content),
            os: datas.os.osName + datas.os.osVersion,
            browser: datas.os.browserName + datas.os.browserVersion
        })
        if (data.code == 200) {
            callback(true)
            Toast.open(data.msg)
            return
        } else {
            Toast.open(data.msg)
        }
    }
}
/**
 * 子评论回复
 * 
 * @param datas 返回的评论数据 
 * @param callback 是否关闭评论框
 */
const handleSubReply = async (datas: CommentResult, callback: (value: boolean) => void) => {
    if (validateUser()) {
        if (isNull(datas.content)) {
            Toast.open('请输入评论内容')
            return
        }
        const data = await commentSaveApi({
            articleId: states().paramsId,
            mid: datas.midComment.id,
            pid: datas.replyComment.id,
            replyUserId: datas.replyComment.user.id,
            content: toBr(datas.content),
            os: datas.os.osName + datas.os.osVersion,
            browser: datas.os.browserName + datas.os.browserVersion
        })
        if (data.code == 200) {
            callback(true)
            Toast.open(data.msg)
            return
        } else {
            Toast.open(data.msg)
        }
    }
}
/**
 * 加载更多
 * 
 * @param commentPage 当前请求页码
 * @param midCommentId 主评论ID
 * @param callback 请求的评论数据
 */
const handleMore = async (commentPage: number, midCommentId: string, callback: (comments: ArticleCommentVo[]) => void) => {
    //请求评论
    const data = await moreCommentApi(commentPage, states().paramsId!, midCommentId)
    callback(data.data.list)
}
/**
 * 评论状态
 * 
 * @param state 是否评论成功 
 */
const commentState = (state: boolean) => {
    if (state) {
        refresh()
    }
}
/**
 * 评论点赞
 * 
 * @param datas 返回的评论数据 
 * @param callback 是否点赞成功 
 */
const handleLike = async (datas: CommentResult, callback: (value: boolean) => void) => {
    if (validateUser()) {
        const data = await commentLikeApi(datas.comment.id)
        if (data.code == 200) {
            callback(true)
            Toast.open(data.msg)
        } else {
            Toast.open(data.msg)
        }
    }
}
/**
 * 用户昵称点击跳转
 * 
 * @param user 返回的用户信息
 */
const handleUserInfo = (user: {id: string, name: string, avatar: string}) => {
    window.open('/user/' + user.id)
}
</script>